<template>
	<view>
		<cu-custom title="教师绑定" bgColor="rgba(255,255,255,0)" rightText="添加" @rightClick="rightClick"></cu-custom>
		<u-sticky offset-top="0" :customNavHeight="44">
			<u-tabs @click="curriculumTypeTab" :list="curriculumTypeList" lineWidth="20" lineHeight="7"
				:lineColor="`url(/static/images/ico/active-bg.png) 100% 100%`" :activeStyle="{
			        color: '#ea3457',
			        fontWeight: 'bold',
			        transform: 'scale(1.05)'
			    }" :inactiveStyle="{
			        color: '#333',
			        transform: 'scale(1)'
			    }" itemStyle="padding-right: 30rpx; height: 100rpx;">
			</u-tabs>
		</u-sticky>
		<mescroll-body ref="mescrollRef">
		<view class="padding c-l d-p-b">
			<view class="teacher-list bg-white p-10">
				<view class="top-inf flex">
					<u--image :showLoading="true" radius="10rpx" src="/static/img/2.png" width="160rpx" height="160rpx">
					</u--image>
					<view class="right-in m-l-10">
						<view><text class="f-18 f-w-b m-r-10">史密夫</text><text class="c-o-9 m-r-10">主任教师</text><text class="tip-ton">官方推荐</text></view>
						<view class="flex m-t-10"> <view class="">
					<u-rate :value="5" size="36rpx" readonly inactiveColor="#fccfd9" activeColor="#ea3457"></u-rate>
				</view>
		
				<view class="flex flex-between f-18 c-red">
					
					<text>4.6 </text>
				</view></view>
				<view class="m-t-10 c-o-9">
					账号ID：18188880000
				</view>
					</view>
				</view>
				<view class="bor-inf t-a-r ">
					<button>顶置</button><button class="btn-botb">解除绑定</button>
				</view>
			</view>
			<view class="teacher-list bg-white p-10">
				<view class="top-inf flex">
					<u--image :showLoading="true" radius="10rpx" src="/static/img/2.png" width="160rpx" height="160rpx">
					</u--image>
					<view class="right-in m-l-10">
						<view><text class="f-18 f-w-b m-r-10">史密夫</text><text class="c-o-9 m-r-10">主任教师</text><text class="tip-ton">官方推荐</text></view>
						<view class="flex m-t-10"> <view class="">
					<u-rate :value="5" size="36rpx" readonly inactiveColor="#fccfd9" activeColor="#ea3457"></u-rate>
				</view>
					
				<view class="flex flex-between f-18 c-red">
					
					<text>4.6 </text>
				</view></view>
				<view class="m-t-10 c-o-9">
					账号ID：18188880000
				</view>
					</view>
				</view>
				<view class="bor-inf t-a-r ">
					<button>顶置</button><button class="btn-botb">解除绑定</button>
				</view>
			</view>
			<view class="teacher-list bg-white p-10">
				<view class="top-inf flex">
					<u--image :showLoading="true" radius="10rpx" src="/static/img/2.png" width="160rpx" height="160rpx">
					</u--image>
					<view class="right-in m-l-10">
						<view><text class="f-18 f-w-b m-r-10">史密夫</text><text class="c-o-9 m-r-10">主任教师</text><text class="tip-ton">官方推荐</text></view>
						<view class="flex m-t-10"> <view class="">
					<u-rate :value="5" size="36rpx" readonly inactiveColor="#fccfd9" activeColor="#ea3457"></u-rate>
				</view>
					
				<view class="flex flex-between f-18 c-red">
					
					<text>4.6 </text>
				</view></view>
				<view class="m-t-10 c-o-9">
					账号ID：18188880000
				</view>
					</view>
				</view>
				<view class="bor-inf t-a-r ">
					<button>顶置</button><button class="btn-botb">解除绑定</button>
				</view>
			</view>
			
		</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	import comment from './components/comment.vue' //评论
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			comment
		},
		data() {
			return {
				curriculumTypeList: [{
					name: '全部'
				},
				// {
				// 	name: '托管'
				// },
				// {
				// 	name: '兴趣班'
				// }
				],
			}
		},
		methods: {
			//导航顶部右边跳转 
			rightClick(){
				uni.navigateTo({
					url: '../mechanism/bindteacher'
				});
			},
			//切换Tab
			curriculumTypeTab(item) {
				this.curriculumIndex = item.index
			},
			
			//下拉刷新
			downCallback() {
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			/*上拉加载的回调*/
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				// this.getList(pageNum)
				this.mescroll.endErr(); // 请求失败,隐藏加载状态
			},
		}
	}
</script>

<style lang="less" scoped>
@import '@/static/css/common.css';
.teacher-list{ border-radius: 10px; margin-bottom: 15px;}
.button-t{display: block; padding-bottom: 45px;
	button{ background: none; border: 1px solid #ddd; color: #666; font-size: 13px; border-radius: 50px; margin: 15px 5px; width: auto; float: right;}
}
.bg-b{background: blue; padding: 2px 7px; margin-top: 5px; border-radius: 10px 10px 10px 0px;}
.top-text{ border-radius: 10px; padding: 10px 15px; margin-bottom: 10px; color: #999; height: 40px;}
.open-cl{ border: 1px solid #EA3457; border-radius: 20px;}
.cle-g{border: 1px solid #EA3457; color: #EA3457; border-radius: 20px; height: 20px; width: 20px; line-height: 20px; margin-top: 7px; margin-left: 15px; margin-right: 5px;}
.shangjia{ margin-top: 45px;

}
.tip-ton { background: #708CF7; font-size: 8px !important; color: #fff; display: inline-block; padding: 2px 3px; border-radius: 13px 13px 13px 0 ;}
.button-z{button{ width: 50%; border: 0; background: none; font-size: 18px; height: 30px; line-height: 30px; margin-top: 10px;}
}
.bor-inf{ display: flow-root; margin-top: 10px;}
/deep/.bor-inf uni-button{background-color:  rgba(0,0,0,.0) !important;border:1px solid rgba(0,0,0,.2);  font-size: 14px; border-radius: 20px; margin-right: 0; margin-left: 10px; float: right; line-height: 2;}
/deep/uni-button:after{border:1px solid rgba(0,0,0,.2); background-color:  rgba(0,0,0,.0) !important;}
</style>
